Autor: Skender Mustafi
Nga elementet shumë të rëndësishme të ueb faqes janë edhe listat të cilat mundësojnë organizimin e numërimeve ose rradhitjes së përmbajtjeve të ndryshme.
Njihen tre lloje të listave të cilat mund të programohen përmes HTML-së:
- Listat e numërimit
- Listat e me shenja
- Listat e definicioneve
Etiketa për paraqitjen e listave të numërimit është <ol></ol>, etiketa për paraqitjen e listave të shenjave është <ul></ul>, kurse etiketa për paraqitjen e listave të definuara është <dl></dl>. Etiketa, pjesë përbërëse e listave të numërimit dhe atyre me shenja që paraqet elementet e listës është <li></li>.
Listat e numërimit
Për të paraqitur një listë numrash shkruajmë:
| Kodi | Rezultati |
| <ol> <li>HTML</li> <li>CSS</b></li> <li>Web</li> <li>Programim</b></li> </ol> |
|
Lista e më sipërme mund të thellohet në nën-lista të elementeve të saja duke shtuar po të njëjtin kod më sipër tek elementi ose elementet që duam t’i thellojmë. Le të thellojmë për shembull <li>Web</li>, kështu lista e plotë duhet paraqitur si vijon:<ol>
| Kodi | Rezultati |
| <ol> <li>HTML</li> <li>CSS</b></li> <li>Web</li> <ol> <li>Programim</li> <li>Dizajn</b></li> <li>Menaxhim</li> <li>Mirëmbajtje</li> </ol> <li>Programim</b></li> </ol> |
|
Listat e numërimit mund të manipulohen edhe më tej duke ndikuar në rregullimin e numrave sipas dëshirës. Le të marrim shembull që një listë duam të e fillojmë me një numër të caktuar x që ndryshon nga numri 1, sepse me numrin 1 në mënyrë standarde fillon lista, atëherë thjeshtë duke vendosur start=”x” tek etiketa <ol> bëjmë që lista të fillojë me numrin e dëshiruar. Shembull:
| Kodi | Rezultati |
| <ol start=”8″> <li>HTML</li> <li>CSS</b></li> <li>Web</li> <li>Programim</b></li> </ol> |
|
Për më tepër mund të bëjmë që lista të thyhet në numërim sa herë që të duam dhe me vlerat që ne duam, varësisht nga nevoja. Këtë mund të e bëjmë duke u dhënë vlerë etiketave të radhitjes së elementeve në listë <li>, value=”x”. Ajo që është lehtësuese në këtë rast është se etiketat pasuese të mbajtjes së elementeve nuk ka nevojë të marrin vlera meqë e marrin vlerën pasuese automatikisht nga etiketa me vlerë siç kemi në shembullin e më poshtëm 5,6,7,8… që marrin vlerën nga etiketa e definuar me 4 ose 101, 102, 103 që marrin vlerën nga etiketa e definuar me 100:
| Kodi | Rezultati |
| <ol> <li value=”4″>HTML</li> <li>CSS</b></li> <li>Web</li> <li>Programim</b></li><li>HTML</li> <li>CSS</b></li> <li>Web</li> <li value=”100″>Programim</b></li> <li>HTML</li> <li>CSS</b></li> <li>Web</li> <li>Programim</b></li> </ol> |
|
Listat e shenjave
Për të paraqitur një listë një listë shenjash shkruajmë:
| Kodi | Rezultati |
| <ul> <li>Lista</li> <li>sipas</li> <li>shenjave</li> <li>të ndryshme</li> </ul> |
|
Gjithashtu edhe listat e shenjave mund të thellohen në të njëjtën mënyrë sikur listat e numrave.
| Kodi | Rezultati |
| <ul> <li>Lista</li> <ul> <li>të numërimit</li> <li>të shenjave</li> <li>të definuara</li> </ul> <li>sipas</li> <li>shenjave</li> <li>të ndryshme</li> </ul> |
|
Kombinimi i listave të shenjave dhe listave të numërimit
Madje këto dy lloje të listave mund të kombinohen sipas dëshirës.
| Kodi | Rezultati |
| <ol> <li>HTML</li> <li>CSS</b></li> <li>Web</li> <ul> <li>Programim</li> <ol> <li>ASP</li> <li>PHP</li> <li>JavaScript</li> </ol> <li>Dizajn</b></li> <li>Menaxhim</li> <li>Mirëmbajtje</li> </ul> <li>Programim</b></li> </ol> |
|
Listat e definicioneve
Listat e definicioneve janë listat që paraqesin termet me definicionet e tyre. Pra, ky është qëllimi kryesorë i këtyre listave, por që sipas nevojës mund të shfrytëzohen dhe për qëllime tjera. Etiketa e definimit të këtyre listave është <dl></dl>, etiketa e paraqitjes së termeve në listë është <dt></dt>, kurse etiketa e paraqitjes së definicioneve është <dd></dd>. Shembull:
| Kodi | Rezultati |
| <dl> <dt>Arie</dt> <dd>Pjesë lirike për një zë, që shoqërohet me një vegël ose me orkestër (zakonisht pjesë e një opere ose operete). Arie nga opera. Këndoj një arie.</dd> <dt>Babanace</dt> <dd>Bukë misri e zënë me ujë të ftohtë dhe e pa kulluar mirë në të pjekur; bukë e qullët, e papjekur mirë. S’hahej babanacja.</dd> <dt>Cece</dt> <dd>Miza cece zool.: mizë e vendeve të Afrikës, që me pickimin e saj shkakton sëmundjen e gjumit te njerëzit ose helmimin e kafshëve.</dd> <dt>Gabel</dt> <dd>Cigan endacak, arixhi.</dd> </dl> |
|
Stilizimi i listave përmes CSS
Listat mund të marrin dhe atribute të ndryshme të cilat u përcaktohen përmes kodit të stilizimit. Atributet që mund t’i marrin janë:
- Për listat me shenja
- circle – rreth i zbrazët
- square – katror i mbushur
- Për listat e numërimit
- decimal-leading-zero – numra të cilëve u prinë zero: 01, 02, 03, 04
- lower-roman – numrat romak: i, ii, iii, iv
- upper-roman – numrat romak me shkronja të mëdha: I, II, III, IV
- lower-alpha – shkronjat e vogla të alfabetit: a, b, c, d
- upper-alpha – shkronjat e mëdha të alfabetit: A, B, C, D
- none – asgjë
Atributet e mësipërme mund të i bashkëngjiten cilësdo listë ose nën-listë që dëshirojmë. Kështu për të aplikuar një atribut të dëshiruar në listën e shenjave shfrytëzojmë kodin <ul style=”list-style-type: square”> ose në listën e numërimit <ol style=”list-style-type: upper-roman”>.
Më poshtë po paraqesim listën e plotë të atributeve të cilat mund tu bashkëngjiten etiketave të sipër trajtuara për të rregulluar listat. Në kllapa janë etiketat për të cilat atributi ka vlerë:
- reversed (<ol>) – numërimi bëhet nga prapa, 9, 8, 7, … Shembull: <ol reversed>
- start (<ol>) – numërimi fillon nga një numër i caktuar. Shembull: <ol start=”5″>
- type (<ol>) – lloji i numërimit. Shembull: <ol type=”1|a|A|i|I”> (njëra nga 1|a|A|i|I për të marrë vlerat vazhduese lista.
- value (<li>) – numërimi fillon nga një numër i caktuar. Shembull: <li value=”4″>
Shembull
Ja një shembull i një liste të rregulluar:
| Kodi | Rezultati |
| <ol start=”4″ style=” background: 888fff; border: 1px; border-color: ffeeff; padding: 5px;”> <li>HTML</li> <li>CSS</b></li> <li>Web</li> <ul reversed style=” background: 666fff; border: 1px; border-color: ffeeff; list-style-type: square; padding: 7px;”> <li>Programim</li> <li>Dizajn</b></li> <li>Menaxhim</li> <li>Mirëmbajtje</li> </ul> <li>Programim</b></li> </ol> |
|
